<template lang="html">
  <div class="musicBottom">
    <ul>
      <li v-for="(item,index) in musicList.result.list" >
          <img :src="item.pic_small" alt="">
          <span>{{ item.title }}</span>
      </li>
    </ul>
    <div class="qingchu">

    </div>
  </div>
</template>
<script>
export default {
  name:"musicBottom",
  data(){
    return{
      musicList:{
      result:{}
      }
    }
  },
  created(){
    var musicURL = this.HOST+"/v1/restserver/ting?method=baidu.ting.song.getRecommandSongList&song_id=2517&num=10"
    this.$axios.get(musicURL)
    .then(res =>{
      console.log(res)
      this.musicList=res.data
      console.log( this.musicList);
    })
    .catch(error =>{
    console.log(error);
    })
  }
}
</script>

<style scoped>
.qingchu{
  clear: both;
}
.musicBottom{
  width: 100%;
  overflow: hidden;
}
.musicBottom ul{
  display: block;
  width: 100%;
  overflow: hidden;
}
.musicBottom ul li:nth-of-type(odd){
  margin-right: 4%;
}
.musicBottom ul li {
  float: left;
  width: 48%;
  height: 4.76rem;
}
.musicBottom ul li img{
  width: 100%;
  height: 3.7rem;
}
.musicBottom ul li span{
  display: block;
  width: 100%;
  height: 1.6rem;
  overflow: hidden;
  font-size: 0.35rem;
  color: #333333;
}
</style>
